function NumberFlip(el, origin = 0) {
  this.node = null;
  this.current = origin;
  this.el = el;
  this.itemList = [];
  this.init();
}

NumberFlip.prototype.addItem = function(haveSeparate) {
  let item = new NumberFlipItem();
  if (this.itemList.length == 0) {
    this.node.appendChild(item.node);
  } else {
    this.node.insertBefore(item.node, this.itemList[0].numberItem.node); // 在曾经的第一位的前面+,
  }

  var separate = null;
  if (haveSeparate) {
    separate = new NumberFlipSeparateItem();
    this.node.insertBefore(separate.node, this.itemList[0].numberItem.node);
  }

  let temp = {
    numberItem: item,
    separateItem: separate
  };
  this.itemList.unshift(temp);
};

NumberFlip.prototype.removeItem = function() {
  let item = this.itemList.shift();
  this.node.removeChild(item.numberItem.node);
  if (item.separateItem) this.node.removeChild(item.separateItem.node);
};

NumberFlip.prototype.init = function() {
  this.node = document.querySelector(this.el);
  this.node.style["text-align"] = "center";
  this.node.style["white-space"] = "nowrap";
  if (!this.node) return;
  this.node.classList.add("number-flip-container");
  this.next(this.current);
};

NumberFlip.prototype.next = function(target) {
  if (!this.node) return;
  if (target === undefined || target == null || target === "") return;
  let targetLength = target.toString().length;
  let currentLength = this.itemList.length;
  let distance = targetLength - currentLength;
  if (distance > 0) {
    for (let i = 0; i < distance; i++) {
      if (this.itemList.length > 0 && this.itemList.length % 3 == 0) {
        this.addItem(true);
      } else {
        this.addItem();
      }
    }
  } else if (distance < 0) {
    distance = Math.abs(distance);
    for (let i = 0; i < distance; i++) {
      this.removeItem();
    }
  }
  setTimeout(() => {
    this.setValue(target);
  }, 0);
};

NumberFlip.prototype.setValue = function(target) {
  let arr = target.toString().split("");
  for (let i = 0; i < this.itemList.length; i++) {
    let item = this.itemList[i];
    item.numberItem.next(arr[i]);
  }
};

function NumberFlipItem(index) {
  this.index = index;

  let node = document.createElement("div");
  this.node = node;

  node.style["position"] = "relative";
  node.style["display"] = "inline-block";
  node.style["height"] = "20px";
  node.style["overflow"] = "hidden";
  node.classList.add("number-flip-item");

  let translateContainer = document.createElement("div");
  this.translateContainer = translateContainer;
  translateContainer.style["transform"] = "translateY(0) translateZ(0)";
  translateContainer.style["transition"] = "1s";

  for (let i = 0; i < 10; i++) {
    let cell = document.createElement("div");
    cell.classList.add("number-flip-item-cell");
    cell.style["height"] = "20px";
    cell.style["lineHeight"] = "20px";
    node.style["verticalAlign"] = "middle";
    cell.innerHTML = `${i}`;
    translateContainer.appendChild(cell);
  }

  node.appendChild(translateContainer);
}

NumberFlipItem.prototype.next = function(number) {
  this.translateContainer.style["transform"] = `translateY(-${number *
    20}px) translateZ(0)`;
};

function NumberFlipSeparateItem() {
  let node = document.createElement("div");
  node.style["position"] = "relative";
  node.style["display"] = "inline-block";
  node.style["height"] = "20px";
  node.style["line-height"] = "20px";
  node.style["verticalAlign"] = "middle";
  this.node = node;
  node.innerHTML = ",";
}

export default NumberFlip;
